<h1 class="mat-h1">
  Access approval

  <span class="mat-body-1">
    <!--
      Note: coloring doesn't work without selected, see:
      https://github.com/angular/components/issues/9851
    -->
    <mat-chip *ngIf="latestApproval?.status.type === 'pending'"
      color="warn" selected>pending</mat-chip>
    <mat-chip *ngIf="latestApproval?.status.type === 'valid'"
      color="success" selected>pending</mat-chip>
  </span>
</h1>

<p *ngIf="latestApproval?.status.type === 'pending'" class="mat-body-1">
  An approval request with reason "{{latestApproval.reason}}" has been sent to
  {{latestApproval.requestedApprovers.join(", ")}}.
</p>
<p *ngIf="latestApproval?.status.type === 'valid'" class="mat-body-1">
  {{latestApproval.approvers.join(", ")}} approved access for reason
  "{{latestApproval.reason}}".
</p>

<form (submit)="submitRequest()" [formGroup]="form">
  <mat-form-field appearance="outline">
    <mat-label>Reason for approval</mat-label>
    <input matInput formControlName="reason">
  </mat-form-field>

  <div class="approvers">
    <mat-form-field appearance="outline">
      <mat-label>Approvers</mat-label>
      <input matInput formControlName="approvers">
    </mat-form-field>
    <mat-checkbox *ngIf="ccEmail$ | async as ccEmail"
      color="primary" formControlName="ccEnabled">
      CC: {{ccEmail}}
    </mat-checkbox>
  </div>

  <button mat-flat-button color="primary" type="submit">Request access</button>
</form>
